<template>
    <div class="wrapper">
        <el-input
            v-model="search"
            size="mini"
            placeholder="输入 活动名称 或 活动类型 或 发起者 进行搜索"/>
        <el-table
        :data="tableData.filter(data => !search 
        || data.title.toLowerCase().includes(search.toLowerCase()) 
        || data.tag.toLowerCase().includes(search.toLowerCase())
        )"
        style="width: 100vw;"
        :default-sort = "{prop: 'endTime', order: 'descending'}"
        >
        <el-table-column
            header-align="center"
            type="expand"
            width="15" 
            >
            <template slot-scope="props">
            <el-form label-position="left" inline class="elementui-table-expand">
                <el-form-item label="活动名称">
                <span>{{ props.row.title }}</span>
                </el-form-item>
                <el-form-item label="活动简介" border>
                <span>{{ props.row.introduce }}</span>
                </el-form-item>
                <el-form-item label="开始时间">
                <span>{{ props.row.beginTime }}</span>
                </el-form-item>
                <el-form-item label="结束时间">
                <span>{{ props.row.endTime }}</span>
                </el-form-item>
                <el-form-item label="活动地点">
                <span>{{ props.row.location }}</span>
                </el-form-item>
                <el-form-item label="创建者ID">
                <span>{{ props.row.uid }}</span>
                </el-form-item>
                <el-form-item label="联系方式">
                <span>{{ props.row.contact }}</span>
                </el-form-item>
                <el-form-item label="活动分类">
                <span>{{ props.row.tag }}</span>
                </el-form-item>
            </el-form>
            </template>
        </el-table-column>

        <el-table-column
            prop="endTime"
            label="结束日期"
            align="center"
            sortable
        >
            <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="title"
            label="活动名称"
            >
        </el-table-column>
        <el-table-column
            prop="tag"
            label="标签"
            :filters="filters"
            :filter-method="filterTag"
            width="75">
            <template slot-scope="scope">
            <el-tag
                :type='btnStyle[scope.row.tag]'
                disable-transitions>
                {{scope.row.tag}}
            </el-tag>
        </template>
        </el-table-column>
        </el-table>
    </div>
</template>

<script>

  export default {
    name:'MyActiveData',
    components:{},
    props:{
        tableData: Array,
        filters: Array
    },
    data(){
      return {
        search: '',
        btnStyle: {
            '聚餐':'primary',
            '学习':'success',
            '出游':'info',
            '其他':'warning',
        }
      }
    },
    created(){},
    mounted(){},
    activated(){},
    updated(){},
    methods:{
        resetDateFilter() {
            this.$refs.filterTable.clearFilter('date');
        },
        clearFilter() {
            this.$refs.filterTable.clearFilter();
        },
        formatter(row, column) {
            return row.address;
        },
        filterTag(value, row) {
            return row.tag === value;
        },
        filterHandler(value, row, column) {
            const property = column['property']
            return row[property] === value;
        }
    },
    computed:{},
    watch:{},
  }
</script>
<style scoped>
 .elementui-table-expand .el-form-item{
    min-width: 45%;
    max-width: 45%;
    overflow: hidden;
 }
</style>